<template>
    <div>
        <el-form label-position="left" :model="queryParams" ref="queryForm" size="small" :inline="true"
            label-width="68px" class="formBox">
            <el-form-item label="顾客ID" prop="patientId" clearable>
                <el-input v-model="queryParams.patientId" suffix-icon="el-icon-search" placeholder="顾客ID" clearable />
            </el-form-item>
            <el-form-item label="身份证号" :prop="isIdNum ? 'idNum' : ''">
                <el-input ref="saveTagInput" v-model="queryParams.idNum" :disabled="baseInfoInput" placeholder="请输入身份证号"
                    @blur="changeBirthDate(queryParams.idNum)">

                    <i slot="suffix" class="el-input__icon el-icon-search"></i>
                </el-input>
            </el-form-item>
            <el-button v-if="!baseInfoInput" :disabled="baseInfoInput" plain type="danger" @click="confirmIsIdNum">{{
            isIdNum ? "无身份证号时请点击" : "有身份证号时请点击"
        }}
            </el-button>
            <el-button v-else disabled plain type="danger" @click="confirmIsIdNum">无身份证号时请点击
            </el-button>
            <el-form-item label="顾客姓名" prop="patientName" clearable>
                <el-input v-model="queryParams.patientName" placeholder="顾客姓名" clearable />
            </el-form-item>
            <el-form-item label="顾客编号" prop="visitNum" clearable>
                <el-input v-model="queryParams.visitNum" placeholder="顾客编号" clearable />
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-select v-model="queryParams.sex" clearable placeholder="性别">
                    <el-option v-for="dict in dict.type.sys_user_sex" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="出生年月" prop="birthDate">
                <el-date-picker v-model="queryParams.birthDate" placeholder="选择出生年月" style="width: 203px"
                    :picker-options="expireTimeOPtion" type="date" value-format="yyyy-MM-dd">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="手机号" prop="patientPhone">
                <el-input v-model="queryParams.patientPhone" :maxlength="11" placeholder="请输入手机号" clearable/>
            </el-form-item>
            <el-form-item label="首诊日期" prop="doctorTime">
                <el-date-picker v-model="queryParams.doctorTime" placeholder="选择首诊日期" style="width: 203px"
                    :picker-options="expireTimeOPtion" type="date" value-format="yyyy-MM-dd">
                </el-date-picker>
            </el-form-item>


            <el-row style="font-size:15px;margin-top:10px;">
                <el-col :span="24"><span class="header">状态：</span><span
                        style="color:red;font-size:15px;font-weight:700;">{{
            matchDict("sys_diagnosis_status", queryParams.status) }}</span></el-col>
            </el-row>
            <el-row style="font-size:15px;margin-top:10px;">
                <el-col :span="24"><span class="header">诊断：</span><span
                        style="color:red;font-size:15px;font-weight:700;">{{
            queryParams.doctorDiagnosis }}</span></el-col>
            </el-row>
            <el-row style="font-size:15px;margin-top:10px;">
                <el-col :span="24"><span class="header">方案：</span><span
                        style="color:red;font-size:15px;font-weight:700;">{{
            queryParams.doctorPlan }}</span></el-col>
            </el-row>

            <el-row style="font-size:15px;margin-top:10px;">
                <el-form-item label="随访方式" prop="planType" clearable>
                    <el-select v-model="queryParams.planType" placeholder="随访方式" clearable filterable
                        style="width: 140px">
                        <el-option v-for="dict in plansTypes" :key="dict.value" :label="dict.label"
                            :value="dict.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="计划随访日期" prop="planDate" clearable label-width="100px">
                    <el-date-picker v-model="queryParams.planDate" type="date" placeholder="选择日期" style="width: 150px">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="随访表单" prop="planType" clearable>
                    <el-select v-model="queryParams.planType" placeholder="随访表单" clearable filterable
                        style="width:300px">
                        <el-option v-for="dict in plansTypes" :key="dict.value" :label="dict.label"
                            :value="dict.value" />
                    </el-select>
                </el-form-item>
            </el-row>
            <el-row style="font-size:15px;margin-top:10px;">

                <el-form-item label="随访角色" prop="planName" :clearable="false">
                    <el-select v-model="roles" multiple placeholder="随访角色" clearable filterable style="width:780px;">
                        <el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName"
                            :value="item.roleId" />
                    </el-select>
                </el-form-item>

            </el-row>
            <el-row style="font-size:15px;margin-top:10px;">


            </el-row>
        </el-form>
        <el-button class="Addbtn" @click="submitEvent">提交</el-button>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
    getUser,
} from "@/api/system/user";
export default {
    name: "add",
    dicts: ["sys_textmanage_type", 'sys_manage_diseases', 'sys_user_sex', 'sys_diagnosis_status'],
    components: {},
    props: [],
    data() {
        return {
            expireTimeOPtion: {
                disabledDate(time) {
                    return time.getTime() > Date.now() - 8.64e6;  //如果没有后面的-8.64e6就是不可以选择今天的
                }
            },
            // 禁止修改
            baseInfoInput: false,
            //是否有身份证号
            isIdNum: true,
            // 角色选项
            roleOptions: [],
            roles: [],
            plansTypes: [
                {
                    value: "1",
                    label: '电话'
                }, {
                    value: "5",
                    label: '微信'
                }
            ],
            currentTab: 'followRecord',
            queryParams: {
                visitNum: undefined,
                patientName: undefined,
                patientId: undefined,
                idNum: undefined,
                sex: undefined,
                birthDate: undefined,
                patientPhone: undefined,
                age: undefined,
                doctorTime: undefined

            },
            planType: "1",
            DateTimeValue: '',//随访日期
            planName: '',//随访人
        };
    },
    watch: {},
    created() {

    },
    computed: {
        ...mapGetters(["nickName"]),
        defaultTime: function () {
            let date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();
            month = month > 9 ? month : "0" + month;
            day = day < 10 ? "0" + day : day;
            let today = year + "-" + month + "-" + day;
            return today;
        },
        isAdmin() {
            return this.$store.state.user.name === 'admin' ? true : false
        }
    },
    mounted() {


        this.planName = this.nickName
        this.DateTimeValue = this.defaultTime
        this.getRole();
    },

    methods: {
        confirmIsIdNum() {
            if (this.isIdNum) {
                this.$confirm(
                    `请确认该顾客无身份证?系统自动生成一个随机数,建议输入亲属身份证号加或减1位!`,
                    "提示",
                    {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    }
                )
                    .then((content) => {
                        this.isIdNum = false;
                        this.queryParams.idNum = "98" + Date.now();
                    })
                    .catch((error) => {
                        return;
                    });
            } else {
                this.isIdNum = true;
            }
        },
        changeBirthDate(idCard) {
            console.log("changeBirthDate--", idCard);
            if (!idCard) {
                return;
            }
            var birthday = "";
            var genderCode = ""; // 性别代码
            if (idCard != null && idCard != "") {
                // 一代身份证号码长度为15位（第15位为性别代码）
                if (idCard.length == 15) {
                    birthday = "19" + idCard.substr(6, 6);
                    genderCode = idCard.charAt(14);
                } else if (idCard.length == 18) {
                    // 二代身份证号码长度为18位（第17位为性别代码）
                    birthday = idCard.substr(6, 8);
                    genderCode = idCard.charAt(16);
                }
                if (genderCode && !isNaN(genderCode)) {
                    // 两代身份证号码的性别代码都为男奇女偶
                    if (parseInt(genderCode) % 2 == 0) {
                        this.queryParams.sex = "1";
                    } else {
                        this.queryParams.sex = "0";
                    }
                }
                birthday = birthday.replace(/(.{4})(.{2})/, "$1-$2-");
            }
            this.queryParams.birthDate = birthday;
            this.confirmIdNumShow = true;

        },
        getRole() {
            getUser().then((response) => {
                this.roleOptions = response.roles;
            });
        },
        matchDict: function (key, id) {
            let _this = this;
            const result = _this.dict.type[key];
            let textValue = "";
            result.forEach((item) => {
                if (item.raw.dictValue == id) {
                    textValue = item.raw.dictLabel;
                }
            });
            return textValue;
        },
        submitEvent() {

        }
    },
};
</script>
<style scoped>
.header {
    font-weight: bold;
}

.Addbtn {
    background-color: #f3a4a1;
    color: white;
    margin: 0 auto;
    display: block;
}
</style>
